<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>游戏公司</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="../../css/iconfont.css" />
		<!--折叠板styles.css-->
		<link rel="stylesheet" href="../../css/home/styles.css" />
		<link rel="stylesheet" href="../../css/mui.min.css">
		<!--有些重写mui原带样式放在mui.css下面-->
		<link rel="stylesheet" type="text/css" href="../../css/home/game_company.css" />
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">游戏公司</h1>
		</header>

		<div class="mui-content">
			<div class="mui-table-view">
				<img style="width: 100%;min-height: 150px;" src="../../img/a.jpg" />
			</div>
			<!-- Start 折叠板 -->
			<ul class="expmenu mui-table-view" id="ul">
				<li class="mui-table-view-cell">
					<ul class="menu" style="display: none;">
						<!--{{dirnk_describe}}-->
						<div class="zheDieBan_defulHide">
							<img style="width: 22%;" class="mui-pull-left mui-inline" src="../../img/gongsi/shang.png" />
							<span class="mui-inline">暴雪娱乐</span>
						</div>
						<p>dsfdsfdsfdsfdsf啊大大萨达撒多撒多问问企鹅王企鹅无群二我确认为企业同样会突然与一条非法大哥大法官梵蒂冈梵蒂冈发的</p>
					</ul>
					<div class="header">
						<div class="mui-inline mui-pull-left left_pic">
							<img style="width: 90%;" class="mui-pull-left" src="../../img/gongsi/shang.png" />
						</div>
						<div class="mui-inline zheDieBan_defulShow">
							<span style="color: #3B3232;" class="clickprobject">
								暴雪娱乐
								</span>
							<span id="arrow" class="arrow up">
									<p style="color: #797676;">点击查看更多</p>
								</span>
						</div>
						<div class="mui-inline mui-pull-right right_pic">
							<img style="width: 90%;" class="mui-pull-right" src="../../img/gongsi/xia.png" />
						</div>
					</div>
				</li>
			</ul>
			<!-- End 折叠板 -->

			<div class="conttentList">
				<div style="" class="mui-row">
					<div class="mui-inline mui-pull-left sele_item">
						<a class="select atv">
							旗下游戏
						</a>
					</div>
					<div class="mui-inline mui-pull-left sele_item">
						<a class="select">
							特权礼包
						</a>
					</div>
				</div>
				<div class="content show">
					<ul class="mui-table-view" id="ul_first">
						<!--<li class="mui-table-view-cell mui-media onLine_li" style="padding: 5px 0;">
							<a href="javascript:;">
								<div class="" style="position: relative;">
									<img class="mui-media-object mui-pull-left" src="http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/6mraAJ5drP.png">
									<p class="mui-ellipsis" style="color: #333333;font-size: 16px;">魔兽世界</p>
									<div class="mui-media-body mui-pull-right">
										<p style="width: 55px;font-size: 10px;background: #CCC34C;border-radius: 0;margin-top: 6px;color: #FFFFFF;text-align: center;" class="mui-pull-right">IGN:9.8</p>
									</div>
									<p class="online_p_gameDetail p_gameDetail mui-ellipsis">经典卡包卡包*经典卡包卡包经典卡包卡包*经典卡包卡包</p>
								</div>
								<div class="meta-info">
									<p class="mui-pull-left p_first" style="border: none;">月卡</p>

								</div>
							</a>
						</li>-->
					</ul>
					<!--列表信息流 结束-->

				</div>
				<div class="content hide gift_div" >

					<ul class="mui-table-view" id="ul_second">
						<!--<li class="mui-table-view-cell mui-media onLine_li" style="padding: 5px 0;">
							<a href="javascript:;">
								<div class="" style="position: relative;">
									<img class="mui-media-object mui-pull-left" src="http://zhihuiyuan.oss-cn-beijing.aliyuncs.com/tZEPMyNKPG.png">
									<p style="color: #3B3232;font-size: 16px;letter-spacing: 0;">女巫森林专属礼包</p>
									<div class="mui-media-body mui-pull-right">
										<button style="border-radius: 5px;width: 55px;border: 1px solid rgb(202, 194, 76); color: rgb(202, 194, 76);padding: 2px 3px 0 3px;" class="receive mui-btn mui-pull-right geft">领取</button>
									</div>
									<p class="online_p_gameDetail p_gameDetail mui-ellipsis">经典卡包卡包*经典卡包卡包经典卡包卡包*经典卡包卡包</p>
								</div>
								<div class="meta-info">
									<p class="mui-pull-left p_first" style="border: none;">茶花之间</p>
									<p class="mui-pull-right P_grade">300积分</p>
								</div>
							</a>
						</li>-->

					</ul>
					<!--列表信息流 结束-->
				</div>
			</div>
			<!--旗下游戏-->
			<script type="text/html" id="list">
				<li class="mui-table-view-cell mui-media onLine_li" style="padding: 5px 0;">
					<a href="javascript:;">
						<div class="" style="position: relative;letter-spacing: 0;">
							<img class="mui-media-object mui-pull-left" src="{{img}}">
							<p style="color: #3B3232;font-size: 16px;">{{title}}</p>
							<div class="mui-media-body mui-pull-right">
								<p style="width: 55px;font-size: 10px;background: #CCC34C;border-radius: 0;margin-top: 6px;color: #FFFFFF;text-align: center;" class="mui-pull-right">{{edition}}</p>
							</div>
							<p class="online_p_gameDetail p_gameDetail mui-ellipsis">{{second_title}}</p>
						</div>
						<div class="meta-info">
							<p class="mui-pull-left p_first" style="border: none;">{{name}}</p>
						</div>
					</a>
				</li>
			</script>
			<!--特权礼包-->
			
			<script type="text/html" id="list2">
				<li class="mui-table-view-cell mui-media onLine_li" style="padding: 5px 0;">
					<a href="javascript:;">
						<div class="" style="position: relative;">
							<img class="mui-media-object mui-pull-left" src="{{img}}">
							<p style="color: #333333;font-size: 16px;letter-spacing: 0;">{{title}}</p>
							<div class="mui-media-body mui-pull-right">
								<button style="" class="receive mui-btn mui-pull-right geft">领取</button>
							</div>
							<p class="online_p_gameDetail p_gameDetail mui-ellipsis">{{second_title}}</p>
						</div>
						<div class="meta-info">
							<p class="mui-pull-left p_first" style="border: none;">{{gift_name}}</p>
							<p class="mui-pull-right P_grade">{{integral}}积分</p>
						</div>
					</a>
				</li>
			</script>
			<script type="text/javascript" src="../../js/vue.min.js"></script>
			<script src="../../js/jquery.min.js"></script>
			<script src="../../js/mui.min.js"></script>
			<script src="../../js/webviewGroup.js" type="text/javascript" charset="utf-8"></script>
			<!--折叠板的js-->
			<script type="text/javascript" src="../../js/jquery.tools.min.js"></script>
			<script type="text/javascript" src="../../js/home/main.js"></script>
			<!--折叠板的js结束-->
			<script type="text/javascript" src="../../js/home/gameCompany.js"></script>
			<script>
				mui.init();
				var pic = "";			//旗下游戏图片
				var lists = [];		 	//旗下游戏数据数组
				var list_html = "";		//旗下游戏模板HTML变量
				var title = "";			//旗下游戏标题
				var second_title = "";	//旗下游戏标题2
				var edition = "";		//旗下游戏版本
				var card = "";			//月卡费
				
				var lists2 = []; 		//礼包数据数组
				var list_html2 = "";	//礼包模板HTML变量
				var pic2 = "";			//礼包图片
				var title2 = "";		//礼包标题
				var second_title2 = ""; //礼包标题2
				var gift_name = "";		//礼包名
				var integral = "";		//礼包积分
				
				mui.getJSON("../../json/game_company.json", function(data) {
					if(data.lists) {
						//旗下游戏
						lists = data.lists;
						for(var i = 0; i < lists.length; i++) {
							pic = lists[i].pic;
							title = lists[i].title;
							second_title = lists[i].second_title;
							card = lists[i].card;
							edition = lists[i].edition;
							list_html += del_html_tags($("#list").html(), "{{img}}", pic);
							list_html = del_html_tags(list_html, "{{title}}", title);
							list_html = del_html_tags(list_html, "{{second_title}}", second_title);
							list_html = del_html_tags(list_html, "{{name}}", card);
							list_html = del_html_tags(list_html, "{{edition}}", edition);
						}
						$("#ul_first").append(list_html);
						$("#ul_first").on('tap',"li",function(){
							mui.openWindow({
								url:"./gameDetail.html",
								id:"./gameDetail.html",
							})
						})
						
					}
					if(data.lists2) {
						//特权礼包
						lists2 = data.lists2;
						for(var i = 0; i < lists2.length; i++) {
							pic2 = lists2[i].pic;
							
							title2 = lists2[i].title;
							second_title2 = lists2[i].second_title;
							gift_name = lists2[i].gift_name;
							integral = lists2[i].integral;
							
							list_html2 += del_html_tags($("#list2").html(), "{{img}}", pic2);
							list_html2 = del_html_tags(list_html2, "{{title}}", title2);
							list_html2 = del_html_tags(list_html2, "{{second_title}}", second_title2);
							list_html2 = del_html_tags(list_html2, "{{gift_name}}", gift_name);
							list_html2 = del_html_tags(list_html2, "{{integral}}", integral);
						}
						$("#ul_second").append(list_html2);
						
						//判断点击领取按钮及分级状态
						var integral = $(".P_grade");
						for (var i = 0; i < $(".geft").length; i++) {
							$(".geft")[i].index = i;
							$(".geft")[i].onclick = function(){
								for (var i = 0; i < $(".geft").length; i++) {
									if ($(this).text()=="领取") {
										$(this).addClass("hava_receive");
										$(this).css("color","#FFFFFF");
										$(this).text("已领取");
										mui.toast("领取成功")
										integral[this.index].innerHTML = ""
									} 
								}
								
							}
						}
					}

				})

				//自定义一个方法批量替换制定的字符 
				function del_html_tags(str, reallyDo, replaceWith) {
					var e = new RegExp(reallyDo, "g"); //参数 reallyDo 是一个字符串，指定了正则表达式的模式或其他正则表达式,参数 "g" 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配
					words = str.replace(e, replaceWith); //str里的e换做replaceWith
					return words;
				}

				//选项卡
				var oselect = document.getElementsByClassName('select');
				var content = document.getElementsByClassName("content");
				for(var i = 0; i < oselect.length; i++) {
					oselect[i].index = i;
					oselect[i].onclick = function() {
						for(var i = 0; i < oselect.length; i++) {
							oselect[i].className = "select";
							content[i].className = "content hide";
						}
						this.className = "select atv";
						content[this.index].className = "content show";
					}
				}
				//选项卡结束
			</script>
	</body>

</html>